<template>
  <view class="me-page">
    <!-- 用户信息 -->
    <view class="user-card">
      <image 
        :src="avatar" 
        class="avatar"
        @click="changeAvatar"
      />
      <view class="info">
        <text class="name">{{ username || '点击登录' }}</text>
        <text class="vip" v-if="isVip">VIP会员 有效期至 {{ vipExpire }}</text>
        <text class="vip" v-else>普通用户</text>
      </view>
      <view class="edit-btn" @click="editProfile">
        <image src="https://img.icons8.com/ios/50/000000/edit.png" class="edit-icon" />
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="function-grid">
      <view 
        class="function-item"
        v-for="(item, index) in functions"
        :key="index"
        @click="handleFunction(item)"
      >
        <image :src="item.icon" class="icon" />
        <text class="label">{{ item.label }}</text>
      </view>
    </view>

    <!-- 阅读统计 -->
    <view class="stats-card">
      <view class="stats-header">
        <text>阅读统计</text>
        <text>最近7天</text>
      </view>
      <canvas canvas-id="chart"></canvas>
    </view>

    <!-- 设置入口 -->
    <view class="settings-card">
      <view 
        class="setting-item"
        v-for="(item, index) in settings"
        :key="index"
        @click="handleSetting(item)"
      >
        <image :src="item.icon" class="icon" />
        <text class="label">{{ item.label }}</text>
        <text class="arrow">›</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatar: 'https://picsum.photos/200/200?random=1',
      username: '书虫小张',
      isVip: true,
      vipExpire: '2024-12-31',
      functions: [
        { label: '阅读历史', icon: 'https://img.icons8.com/ios-filled/50/000000/history-book.png' },
        { label: '我的收藏', icon: 'https://img.icons8.com/ios/50/000000/bookmark.png' },
        { label: '消息通知', icon: 'https://img.icons8.com/ios/50/000000/appointment-reminders.png' },
        { label: '积分商城', icon: 'https://img.icons8.com/ios/50/000000/gift.png' }
      ],
      settings: [
        { label: '账号设置', icon: 'https://img.icons8.com/ios/50/000000/user.png' },
        { label: '隐私设置', icon: 'https://img.icons8.com/ios/50/000000/lock.png' },
        { label: '夜间模式', icon: 'https://img.icons8.com/ios/50/000000/moon.png' },
        { label: '关于我们', icon: 'https://img.icons8.com/ios/50/000000/info.png' }
      ]
    }
  },
  methods: {
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.avatar = res.tempFilePaths[0]
        }
      })
    },
    editProfile() {
      uni.navigateTo({
        url: '/pages/edit-profile/edit-profile'
      })
    },
    handleFunction(item) {
      uni.showToast({
        title: `点击了${item.label}`,
        icon: 'none'
      })
    },
    handleSetting(item) {
      uni.showToast({
        title: `点击了${item.label}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
/* 页面容器 */
.me-page {
  padding: 20rpx;
  background-color: #f5f5f5;
}

/* 用户信息 */
.user-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.user-card .avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-card .info {
  flex: 1;
}

.user-card .name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.user-card .vip {
  font-size: 28rpx;
  color: #ff9800;
}

.user-card .edit-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-card .edit-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 功能入口 */
.function-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.function-item .icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.function-item .label {
  font-size: 28rpx;
  color: #666;
}

/* 阅读统计 */
.stats-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.stats-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.stats-header text {
  font-size: 32rpx;
  color: #333;
}

/* 设置入口 */
.settings-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 0 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item .icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.setting-item .label {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.setting-item .arrow {
  font-size: 40rpx;
  color: #999;
}
</style>